<template>
    <div class="z-corner-wrapper">
        <img
            class="z-corner-wrapper__top-left"
            src="~@/assets/img/26.png"
            alt=""
        />
        <img
            class="z-corner-wrapper__top-right"
            src="~@/assets/img/27.png"
            alt=""
        />
        <img
            class="z-corner-wrapper__bottom-left"
            src="~@/assets/img/28.png"
            alt=""
        />
        <img
            class="z-corner-wrapper__bottom-right"
            src="~@/assets/img/29.png"
            alt=""
        />
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "z-corner-wrapper"
};
</script>

<style>
.z-corner-wrapper {
    position: relative;
    background: rgba(20, 31, 59, 0.6);
    box-shadow: inset 0 0 3rem #20bcfc;
    border: 1px solid #20bcfc;
}

.z-corner-wrapper__top-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 8rem;
    height: 6rem;
}

.z-corner-wrapper__top-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 8rem;
    height: 6rem;
}

.z-corner-wrapper__bottom-left {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 8rem;
    height: 6rem;
}

.z-corner-wrapper__bottom-right {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8rem;
    height: 6rem;
}
</style>